import React, { FC, useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { Descriptions } from 'antd'
import moment from 'moment'
const QualityDetail: FC = () => {
  const [detailData, setDetailData] = useState<any>(null)
  const [searchParams, setSearchParams] = useSearchParams()
  useEffect(() => {
    const logId = searchParams.get('logid')
    fetch(`/api/get/data?logid=${logId}`)
      .then((response) => response.json())
      .then((res) => {
        if (res.code === 0) {
          const data = res.info
          setDetailData(data)
        }
      })
  }, [])

  return (
    <div className="detailContainer">
      {detailData ? (
        <Descriptions title="响应数据详情">
          <Descriptions.Item label="记录时间">
            {moment(detailData?.record_time).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="请求长度">{detailData?.access_length}</Descriptions.Item>
          <Descriptions.Item label="请求地址">{detailData?.access_addr}</Descriptions.Item>
          <Descriptions.Item label="请求方法">{detailData?.access_method}</Descriptions.Item>
          <Descriptions.Item label="请求路径">{detailData?.access_path}</Descriptions.Item>
          <Descriptions.Item label="响应主机">{detailData?.backend_addr}</Descriptions.Item>
          <Descriptions.Item label="响应状态">{detailData?.backend_code}</Descriptions.Item>
          <Descriptions.Item label="响应时延">{detailData?.backend_time}</Descriptions.Item>
          <Descriptions.Item label="响应长度">{detailData?.return_length}</Descriptions.Item>
          <Descriptions.Item label="返回状态">{detailData?.return_code}</Descriptions.Item>
          <Descriptions.Item label="返回时延">{detailData?.entire_time}</Descriptions.Item>
          <Descriptions.Item label="参数代理">{detailData?.arg_form_xff}</Descriptions.Item>
        </Descriptions>
      ) : null}
    </div>
  )
}
export default QualityDetail
